import QtQuick 1.0
import 'database.js' as Db

MouseArea {
    id: highScores

    anchors.centerIn: parent
    width: screen.width
    height: screen.height
    onClicked: {
        loader.source = "";
        menu.opacity = 1;
    }

    Rectangle {
        anchors.fill: parent
        color: "black"
        opacity: 0.4
    }

    Image {
        id: topic

        anchors {
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            //topMargin: parent.height*0.05
        }
        //width: parent.width/2
        //height: anchors.topMargin*4
        source: "gfx/highScores.png"
    }

    ListView {
        id: rankingList

        anchors {
            top: topic.bottom
            topMargin: topic.anchors.topMargin
            horizontalCenter: parent.horizontalCenter
        }

        width: 200
        height: 30*model.count
        model: Db.getRankingsModel();
        delegate: Item {
            height: text.height
            Text {
                id: text

                color: textColor
                font.pixelSize: 20
                text: placement + ".";
            }
            Text {
                color: textColor
                font.pixelSize: 20
                x: 40
                text: name
            }
            Text {
                color: textColor
                font.pixelSize: 20
                x: rankingList.width-60
                text: rankTime;
            }
        }
    }

    Button {
        anchors {
            bottom: parent.bottom
            right: parent.right
        }
        name: "ok"
        onClicked: {
            loader.source = "";
            menu.opacity = 1;
        }
    }
}
